import QtQuick 2.0

Item {
    anchors.fill: parent

    ListView {
        id: lstview
        anchors.fill: parent
        model: model
        delegate: detailsdlg
        Component.onCompleted: mainWnd.width = 300
    }

    Component {
        id: detailsdlg
        Item {
            id: wrapper
            width: lstview.width
            height: 30
            // 标题栏
            Rectangle {
                id: namebox
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.top: parent.top
                height: 30
                color: "lightblue"
                Text {
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    font.pixelSize: parent.height - 5
                    text: name
                }
            }
            // 颜色窗格
            Rectangle {
                id: colorbox
                color: colorInfo
                anchors.right: parent.right
                anchors.top: parent.top
                anchors.rightMargin: 2
                anchors.topMargin: 2
                width: 25
                height: 25
            }
            // 展开窗口
            Item {
                id: factsview
                anchors.top: colorbox.bottom
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                // 默认不显示
                opacity: 0
                // 文本部分
                Rectangle {
                    anchors.fill: parent
                    color: "#cccccc"
                    Text {
                        anchors.fill: parent
                        anchors.margins: 5
                        clip: true
                        wrapMode: Text.WordWrap
                        font.pixelSize: 12
                        text: facts
                    }
                }
            }
            // 鼠标事件传递顺序为从外到内，从下到上
            // 若标题栏Area在关闭按钮Area之下则关闭按钮将接收不到click信号
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.log("nameBox expand")
                    parent.state = "expanded"
                }
            }
            // 关闭按钮
            Rectangle {
                id: closebtn
                anchors.right: parent.right
                anchors.top: parent.top
                anchors.rightMargin: 2
                anchors.topMargin: 2
                width: 26
                height: 26
                color: "white"
                opacity: 0
                Text {
                    anchors.centerIn: parent
                    text: "×"
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        console.log("closeBtn")
                        wrapper.state = ""
                    }
                }
            }
            state: ""
            // wrapper状态
            states: [
                State {
                    name: "expanded"
                    PropertyChanges { target: wrapper; height: lstview.height }
                    PropertyChanges { target: colorbox; width: lstview.width; height: lstview.width; anchors.rightMargin: 0; anchors.topMargin: 30 }
                    PropertyChanges { target: factsview; opacity: 1 }
                    PropertyChanges { target: closebtn; opacity: 1 }
                    PropertyChanges { target: wrapper.ListView.view; contentY: wrapper.y; interactive: false }
                }
            ]
            // 过渡
            transitions: [
                Transition {
                    NumberAnimation {
                        duration: 200;
                        properties: "height,width,anchors.rightMargin,anchors.topMargin,opacity,contentY"
                    }
                }
            ]
        }
    }

    ListModel {
        id: model
        ListElement { name: "Mercury"; colorInfo: "red"; facts: "Mercury is the smallest planet in the Solar System. It is the closest planet to the sun. It makes one trip around the Sun once every 87.969 days." }
        ListElement { name: "Venus"; colorInfo: "green"; facts: "Venus is the second planet from the Sun. It is a terrestrial planet because it has a solid, rocky surface. The other terrestrial planets are Mercury, Earth and Mars. Astronomers have known Venus for thousands of years." }
        ListElement { name: "Earth"; colorInfo: "blue"; facts: "The Earth is the third planet from the Sun. It is one of the four terrestrial planets in our Solar System. This means most of its mass is solid. The other three are Mercury, Venus and Mars. The Earth is also called the Blue Planet, 'Planet Earth', and 'Terra'." }
        ListElement { name: "Mars"; colorInfo: "yellow"; facts: "Mars is the fourth planet from the Sun in the Solar System. Mars is dry, rocky and cold. It is home to the largest volcano in the Solar System. Mars is named after the mythological Roman god of war because it is a red planet, which signifies the colour of blood." }
    }
}
